آموزش ساخت ربات چت با قدرت صوتی ChatGPT با React و FastAPI [ویدئو]

سرفصل ها و درس ها

مقدمه و منابع Introduction and Resources

• معرفی دوره Course Introduction

• آنچه ما در حال ساختن What We Are Building

• درباره مربی شما About Your Instructor

• ساختار دوره Course Structure

• انتظار در مقابل واقعیت Expectation versus Reality

• Tech Stack - Backend Tech Stack - Backend

• Tech Stack - Frontend Tech Stack - Frontend

• پشته فناوری - یک ظاهر طراحی شده Tech Stack - Styling

• دستورالعمل های منابع Resource Instructions

• هشدار: تاخیر گاه به گاه OpenAI API Warning: OpenAI API Occasional Delay

اضافی: (اختیاری) - React Crash Course Extra: (Optional) - React Crash Course

• با Vite برنامه React ایجاد کنید Create React App with Vite

• Tailwind را نصب کنید Install Tailwind

• آنچه ما در حال ساختن What We Are Building

• اولین جزء شما Your First Component

• چه اتفاقی افتاده What Just Happened

• طراحی اولین دکمه ما Styling Our First Button

• اجرای وظیفه والدین از کودک (گذراندن وسایل) Running a Parent Function From a Child (Passing Props)

• نظارت بر وضعیت و کنترل عوارض جانبی با useEffect Monitor State and Handle Side Effects with useEffect

• ساختار BetBox BetBox Structuring

• افزودن قابلیت BetButton Adding BetButton Functionality

• ارسال درخواست واکشی Axios Send Axios Fetch Request

• به روز رسانی های نهایی و کارهای پایانی Final Updates and Finishing Touches

• React Learning مراحل بعدی React Learning Next Steps

تنظیم محیط - Frontend و Backend Environment Setup - Frontend and Backend

• توصیه و پلاگین کد VS VS Code Recommendation and Plugins

• راه اندازی پوشه Folder Setup

• بررسی نصب نسخه پایتون و نود Python and Node Version Installation Checks

• FastAPI Python Backend آماده سازی و نصب بسته FastAPI Python Backend Preparation and Package Installations

• React Frontend Preparation and Package Installations React Frontend Preparation and Package Installations

• یکپارچه سازی Tailwind CSS Tailwind CSS Integration

• تنظیم متغیرهای محیطی Setting Up Environment Variables

Backend Build - کار با هوش مصنوعی Backend Build - Working with AI

• اولیه سازی Backend با واردات و CORS Backend Initialization with Imports and CORS

• درباره Docs و Endpoints About Docs and Endpoints

• ضبط قطعه صوتی Record Voice Snippet

• تبدیل صدا به متن با Whisper Convert Voice to Text with Whisper

• مهندسی سریع ChatGPT Prompt Engineering ChatGPT

• در حال دریافت پاسخ ChatGPT Receiving ChatGPT Response

• ذخیره و بازنشانی داده های پیام Store and Reset Message Data

• یازده آزمایشگاه API Docs Walkthrough Eleven Labs API Docs Walkthrough

• دادن صدایی انسانی به راشل Giving Rachel a Human Sounding Voice

• بحث آماده سازی و عیب یابی Frontend Frontend Preparation and Troubleshooting Discussion

Frontend - React Web Application Frontend - React Web Application

• کامپوننت کنترلر ساختاری Structuring Controller Component

• جزء عنوان - قسمت اول (عملکرد بازنشانی) Title Component - Part I (Reset Function)

• جزء عنوان - قسمت دوم (تکمیل رندر) Title Component - Part II (Render Completion)

• کانتینر ضبط کنترلر Controller Recorder Container

• افزودن قابلیت ضبط صدا Adding Audio Recording Functionality

• متحرک سازی یک نماد رکورد Animating a Record Icon

• پخش صدا و کدگذاری Blob Playing Back Audio and Blob Encoding

• سلام راشل Hello Rachel

• تعامل کامل با کاربر و بهینه سازی Full User Interaction and Tweaking

• آماده سازی تولید Making Production Ready

مراحل بعدی Next Steps

• مهندسی سریع و موارد استفاده بیشتر Further Prompt Engineering and Use Cases

• مراحل بعدی Next Steps